<template>
<view>
	<uni-popup ref="popup" type="right" border-radius="10px 10px 0 0">
		<view class="popup_content">
			<!-- 信息 -->
			<view class="infos">
				<view class="infos_t">
					<!-- 姓名盒子 -->
					<view class="name_box">
						<view class="name"> {{baseFormData.name}} </view>
						
						<view class="cut_box">
							<button size="mini">上一页</button>
							<button size="mini">1/10</button>
							<button size="mini">下一页</button>
						</view>
					</view>
					<!-- 客户操作 -->
					<view class="operation">
						<uni-tag text="退回客户" />
						<uni-tag text="删除客户" />
						<uni-tag text="重要客户" />
					</view>
					<!-- 上门状态 -->
					<view class="">
						<uni-segmented-control :current="current" :values="items"  styleType="button" activeColor="#4cd964"></uni-segmented-control>
					</view>
				</view>
				<view class="infos_b">
					<uni-forms ref="baseForm" 
						:modelValue="baseFormData"
						label-width="100"
						label-align="right"
					>
						<!-- 基本信息 -->
						<view class="title"> 基本信息 </view>
						<view class="essential_box">
							<uni-forms-item label="客户名称" required name="name">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
							</uni-forms-item>
							<uni-forms-item label="客户池" required name="tree">
								<uni-easyinput v-model="baseFormData.tree" placeholder="请输入客户池" />
							</uni-forms-item>
							<uni-forms-item label="来源渠道" required name="source">
								<uni-easyinput v-model="baseFormData.source" placeholder="请输入来源渠道" />
							</uni-forms-item>
							<uni-forms-item label="客户等级" required name="class">
								<uni-rate :touchable="false" :value="baseFormData.class" @change="changeClass" />
							</uni-forms-item>
							<uni-forms-item label="性别" required name="sex">
								<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" class="item_checkbox"/>
							</uni-forms-item>
							<uni-forms-item label="年龄" required name="age"> 
								<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
							</uni-forms-item>
							<uni-forms-item label="资金需求" required name="demand">
								<uni-easyinput v-model="baseFormData.demand" placeholder="请输入资金需求" />
							</uni-forms-item>
							<uni-forms-item label="城市" required  name="city">
								<uni-data-picker
									placeholder="请选择城市"
									popup-title="请选择所在地区"
									:localdata="citys"
									v-model="baseFormData.city"
								></uni-data-picker>
							</uni-forms-item>
							
							<uni-forms-item label="学历" required  name="education">
								<uni-data-checkbox v-model="baseFormData.education" :localdata="educations" />
							</uni-forms-item>
							
							<uni-forms-item label="身份" required  name="identity">
								<uni-data-checkbox v-model="baseFormData.identity" :localdata="identitys" />
							</uni-forms-item>
							
							<uni-forms-item label="单位类型" required  name="work">
								<uni-data-checkbox v-model="baseFormData.work" :localdata="works" />
							</uni-forms-item>
							
							<uni-forms-item label="税前收入" required  name="income">
								<uni-data-checkbox v-model="baseFormData.income" :localdata="incomes" />
							</uni-forms-item>
							
							<uni-forms-item label="征信" required  name="credit">
								<uni-data-checkbox v-model="baseFormData.credit" :localdata="credits" />
							</uni-forms-item>
							
							<uni-forms-item label="资质(可多选)" required name="certification">
								<uni-data-checkbox multiple  v-model="baseFormData.certification" :localdata="certifications" />
							</uni-forms-item>
							
				
							<uni-forms-item label="备注">
								<uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="备注信息" />
							</uni-forms-item>
						</view>
						<view class="title"> 联系信息 </view>
						<view class="relation_box">

							<uni-forms-item label="手机号" required name="phone">
								<uni-easyinput v-model="baseFormData.phone" placeholder="请输入手机号码" />
							</uni-forms-item>
							<uni-forms-item label="备用手机" required name="alternativePhone">
								<uni-easyinput v-model="baseFormData.alternativePhone" placeholder="请输入备用手机号码" />
							</uni-forms-item>
							<uni-forms-item label="邮箱" required name="email">
								<uni-easyinput v-model="baseFormData.email" placeholder="请输入邮箱" />
							</uni-forms-item>
							<uni-forms-item label="微信号" required name="wechatId">
								<uni-easyinput v-model="baseFormData.wechatId" placeholder="请输入微信号" />
							</uni-forms-item>
							<uni-forms-item label="QQ" required name="QQ">
								<uni-easyinput v-model="baseFormData.QQ" placeholder="请输入QQ" />
							</uni-forms-item>
						</view>
					</uni-forms>
					
					
				</view>
				<view class="btn_box">
					<button size="mini" class="reset" @click="reset">重置</button>
					<button type="primary" size="mini" class="save" @click="save">保存</button>
				</view>
			</view>
			
			<!-- 备注 -->
			<view class="remarkList_warpper">
				<!-- 顶部标签 -->
				<view class="nav_list">
					<view class="nav_item item_select">跟进记录</view>
					<view class="nav_item">待办</view>
					<view class="nav_item">预约</view>
					<view class="nav_item">订单</view>
				</view>
				
				<view class="follow_box" v-show="nav==1">
					<view class="follow_t">
						<view class="follow_form">
							<view class="label">
								<text style="color: red;">*</text>
								内容 
							</view>
							<textarea
								v-model="followInfo"
								placeholder="请输入内容"
								maxlength="300"
								class="item_r"
							></textarea>
						</view>
						
						<view class="follow_form ">
							<view class="label"> 跟进时间 </view>
							<uni-dateformat class="dateformat" :date="nowTime"></uni-dateformat>
							<uni-icons size="24" color="#999" type="calendar" class="icon-calendar"></uni-icons>
						</view>
						
						<view class="follow_form btn_box">
							<button size="mini" @click="followInfo = ''">重置</button>
							<button size="mini" :disabled="isDisabled" type="primary" @click="submitRecord">提交</button>
						</view>
					</view>
					<view class="remarkList_content"  v-if="remarkList.length > 0">
						<view class="remark_item" v-for="(item, index) in remarkList" :key="index">
							<view class="item_sing"> </view>
							<uni-card :title="item.user_id[0].nickname" :extra="timestampToDate(item.follow_date)">
								<text class="uni-body">{{item.content}}</text>
							</uni-card>
						</view>
						<view class="sing_end"></view>
					</view>
					<view style="margin-top: 100px; display: flex;  justify-content: center; color: #999;" v-else>
						暂无跟进记录
					</view>
					
				</view>
				
				
				<view class="" v-show="nav==2"> 待办 </view>
				<view class="" v-show="nav==3"> 预约 </view>
				<view class="" v-show="nav==4"> 订单 </view>
			</view>
		</view>
	</uni-popup>
</view>
</template>

<script>
import { 
	sexs,
	educations,
	identitys,
	works,
	incomes,
	credits,
	certifications,
	citys,
} from '@/common/formItemSelect.js'
import { mapState } from'vuex'
import {timestampToDate, findCityAndDistrict} from'@/utils/common.js'
	
export default{
	data(){
		return {
			items: ['待上门', '已上门', '待审批', '待放款', '已放款'],
			
			sexs : [],
			educations: [],
			identitys: [],
			works: [],
			incomes: [],
			credits: [],
			certifications: [],
			citys: [],
			current: 0,
			baseFormData :{
				name:'',
				tree:'',
				class:0,
				source:'',
				sex:'',
				phone:'',
				age:'',
				// 资金
				demand:'',
				// 城市
				city:'',
				// 学历
				education:'',
				// 身份
				identity:'',
				// 单位类型
				work: '',
				// 税前收入
				income: '',
				// 征信
				credit:'',
				// 资质
				certification:'',
				// 备注信息
				remark: '',
				// 提交时间
				upload_time: '',
				// 操作
				operation: '操作',
			},
			// 弹出层右侧顶部导航栏决定值
			nav: 1,
			// 当前时间实时
			nowTime: 0,
			// 定时器Id
			timer: null,
			// 跟进记录输入框
			followInfo:'',
			// 提交按钮状态
			isDisabled: false
		}
	},
	
	computed: {
		...mapState({
			// 跟进备注记录
			remarkList: state => state.threadMy.followRecord
		}),
		
	    showPopup() {
			return this.$store.state.threadMy.showPopup;  
	    }
	},
	
	watch: {  
		showPopup(newValue) {
			this.$refs.popup.open();
			this.baseFormData = JSON.parse(JSON.stringify(this.$store.state.threadMy.clientInfo))
		},  
	},  
	
	mounted() {
		this.sexs = sexs
		this.educations = educations
		this.identitys = identitys
		this.works = works
		this.incomes = incomes
		this.credits = credits
		this.certifications = certifications
		this.citys = citys
		
		this.timer = setInterval(()=>{
			this.nowTime = Date.now()
		},1000)
	},
	
	beforeDestroy(){
		// 清除定时器  
		if (this.timer) {  
		    clearInterval(this.timer);  
		    this.timer = null; // 将timer设为null，避免潜在的内存泄漏  
		} 
	},
	
	methods:{
		timestampToDate,
		// 改变等级
		changeClass(e){
			this.baseFormData.class = e.value
		},
		
		// 点击保存
		save(){
			this.$store.dispatch('threadMy/savePopup', this.baseFormData)
		},
		// 点击重置
		reset(){
			this.baseFormData = JSON.parse(JSON.stringify(this.$store.state.threadMy.clientInfo))
		},
		// 提交记录
		async submitRecord(){
			if(this.followInfo.length < 2){
				uni.showToast({ title: "内容长度不够", icon: "none" })
				return 
			}
			this.isDisabled = true
			
			await this.$store.dispatch('threadMy/addFollowRecord',{content: this.followInfo})
				.then(async res=>{
					console.log(res);
					if(res.errCode == 0){
						uni.showToast({ title: "提交成功", icon: "none" })
						this.followInfo = ''
						
						// 修改客户最新跟进时间
						await uniCloud.importObject('zf_followRecord').upTime({
							'latestTime': this.remarkList[0].follow_date,
							'id': this.baseFormData._id
						})
						
						// 重新获取表格数据
						this.$store.dispatch('threadMy/getThreadData')
						
						
					}else{
						uni.showToast({ title: "提交失败", icon: "none" })
					}
				}).catch(err=>{
					console.log(err);
					uni.showToast({ title: "err", icon: "none" })
				})
			this.isDisabled = false
		},
		
		
	}
}
</script>

<style lang="scss" scoped>
.popup_content{
	height: 100vh;
	background-color: #f8f8f8;
	padding: 10px;
	max-width: 80vw;
	display: flex;
	.infos{
		flex: 1;
		display: flex;
		flex-direction: column;
		height: 100%;
		.infos_t{
			height: 150px;
			.name_box{
				display: flex;
				justify-content: space-between;
				
				.name{
					font-weight: 600;
					font-size: 20px;
				}
				.cut_box{
					display: flex;
				}
			}
			.operation{
				height: 60px;
				display: flex;
				align-items: center;
				background-color: #f4f4f4;
				
				margin: 10px 0;
				::v-deep .uni-tag{
					padding:6px 20px;
					border-radius: 2px;
					margin: 0 20px !important;
					background-color: #f8f8f8;
					color: #6c6c6c;
					font-weight: 500;
				}
				
				::v-deep .uni-tag:hover{
					background-color: #f0f8f5 ;
					color: #5d5d5d;
				}
			}
		}
		.infos_b{
			margin-top: 20px;
			overflow-y: auto;
			height: 200px;
			flex: 1;
			.title{
				color: #000;
				font-weight: 600;
				font-size: 16px;
			}
			.essential_box, .relation_box{
				padding: 20px;
				display: grid;
				grid-template-columns: 1fr 1fr;
				::v-deep .uni-rate{
					margin-top: 6px;
				}
				::v-deep .uni-forms-item__label{
					font-weight: 600;
					color: #343434;
				}
				
				::v-deep .item_checkbox{
					margin-top: 6px !important;
				}
			}
			.relation_box{
			}
		}
		
		.btn_box{
			height: 40px;
			padding: 10px;
			position: relative;
			background-color: #f4f4f4;
			.reset{
				position: absolute;
				top: 10px;
				right: 100px;
			}
			.save{
				position: absolute;
				top: 10px;
				right: 30px;
			}
		}

	}
	
	.remarkList_warpper{
		width: 500px;
		margin-left: 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.nav_list{
			height: 42px;
			display: flex;
			.nav_item{
				width: 80px;
				text-align: center;
				height: 40px;
				line-height: 40px;
				border: 1px solid #d1d1d1;
			}
			.item_select{
				border-bottom: none;
				font-weight: 600;
				color: #365cb5;
			}
		}
		
		.follow_box{
			flex: 1;
			margin-top: 10px;
			overflow-y: auto;
			.follow_t{
				.follow_form{
					margin-bottom: 10px;
					display: flex;
					position: relative;
					.icon-calendar{
						position: absolute;
						left: 116px;
						top: 5px;
					}

					.dateformat{
						border: 1px solid #999;
						border-radius: 10px;
						padding: 6px 30px;
						box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
						color: #999;
					}
					textarea{
						height: 120px;
						padding: 8px 12px;
						border: 1px solid #999;
						box-shadow: 0 0 4px #e5e5e5;
						box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
						border-radius: 10px;
					}
					.label{
						width: 100px;
						height: 30px;
						line-height: 30px;
						text-align: right;
						padding-right: 10px;
						font-weight: 600;
						
					}
					.item_r{
						flex: 1;
						height: 100px;
					}
				}
				.btn_box{
					justify-content: flex-end;
					padding-bottom: 20px;
					border-bottom: 1px solid #999;
					::v-deep uni-button {
						margin: 0 10px 0 0 ;
					}
					::v-deep uni-button:last-child {
						margin: 0;
					}
				}
			}
			.remarkList_content{
				border-left: 1px solid #42B983;
				margin-left: 10px;
				// overflow: visible;
				position: relative;
				.remark_item{
					position: relative;
					::v-deep .uni-card{
						margin-top: 0 !important;
					}
					.item_sing{
						width: 10px;
						height: 10px;
						border-radius: 50%;
						background-color: #42B983;
						position: absolute;
						top: 0;
						left: -5px;
						z-index: 9;
					}
					.icon{
						position: absolute;
						top: 13px;
						right: 30px;
						z-index: 99;
					}
				}
				.sing_end{
					width: 10px;
					height: 10px;
					border-radius: 50%;
					background-color: #42B983;
					position: absolute;
					bottom: 0;
					left: -5px;
					z-index: 9;
				}
			}
			
		}
	}
}

</style>